JSX 是什麼

JSX(JavaScript XML)是一種JavaScript的語法擴充，間單來說它讓我們可以在JavaScript中寫HTML的語法，通常會將它使用在React中，讓我們專注於更直觀的定義UI元件。

怎麼使用

定義一個Food元件，元件裡面會return出h1標籤的文字內容，<h1>早餐吃{props.drink}</h1>在這邊即屬於JSX語法。
可以看到它類似於 HTML，但其實是在 JavaScript 中定義的，而且能夠插入 JavaScript 表達式（例如 {props.name}）。

function Food(props){
    return <h1>早餐吃{props.drink}</h1>
}

為什麼要用 JSX

1.在原生的JavaScript中創建DOM元素可能會讓程式碼變的複雜冗長(ex. document.createElement)
JSX本質上處理的事情是生成元素，是React.createElement(component, props, ...child)的語法糖

//使用JSX撰寫
const element = <button>click</button>

//使用 React.createElement撰寫
React.createElement("button", null, "click")

透過上方範例可以看出使用JSX的寫法簡潔許多

2.在傳統的前端函式庫中UI和邏輯常常是分開的，這樣的分離有時會使得UI和相關的邏輯很難保持同步，JSX它可以允許我們在同一個地方定義UI並寫上JavaScript相關的邏輯，確保有任何變動時可以維持同步。

function Counter(){
     const [count, setCount] = useState(0)
        
    return(
        <div>
            <button onClick={()=>setCount(count + 1)}>click</button>
        </div>
    )
}

上方的範例中，UI 的定義和相關的邏輯都包含在同一個 Counter 元件中
當用戶點擊按鈕時，計數器的值會增加，這種方法可以確保 UI 和邏輯始終保持同步。

JSX 使用限制

1.屬性名稱用camelCase表示：JSX會被轉換成JavaScript，JavaScript對變數名稱有限制不能夠使用連接符號或保留字，因此屬性名稱需要這樣寫className

//屬性名稱使用camelCase
return <div className="myClass">Content</div>;

2.只能有一個根元素：如果一個元件會回傳多個元素，這些元素外層一定要用一個父元素將它包來，常見做法是使用<div>或Fragment<> </>

//沒有用父層元素包起來，會報錯
return (
  <h1>Title</h1>
  <p>Description</p>
)

//正確寫法有用div包住元素
return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

3.每一個標籤都要Close:在 JSX 中，每個元素都必須關閉。例如，<input> 和 <br> 在 JSX 中也需要改為 <input /> 和 <br />

// input, br, img 改為用 close 表示
<input type="text" />
<br />
<img src="image.jpg" alt="description" />

4.JavaScript 表達式用 {} 大括號：使用 {} 在 JSX 中插入 JavaScript 表達式。
例如：

// 使用{}插入變數name的值
let name = "AL";
return <h1>Hello, {name}!</h1>;

參考文章
什麼是 JSX?
什麼是 JSX? 為什麼要用 JSX?
Writing Markup with JSX